<template>
	<view class="diamond-container">
		<view v-for="(item) in 10" :key="item" class="diamond-box">
			<view class="diamond col-red"></view>
			<view class="diamond col-white"></view>
			<view class="diamond col-blue"></view>
			<view class="diamond col-white"></view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.diamond-container {
		/* 可以添加一些容器样式，比如居中显示菱形 */
		display: flex;
		flex-direction: row;
		justify-content: start;
		align-items: center;
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.diamond-box {
		display: flex;
		flex-direction: row;
	}

	.diamond {
		width: 30rpx;
		height: 10rpx;
		transform: skew(-45deg);
		transform-origin: bottom left;
		flex-shrink: 0;
		/* 防止菱形缩小 */
		flex-grow: 1;
		/* 允许菱形扩展以填满可用空间 */
	}

	.col-blue {
		background-color: #4876E8;
	}

	.col-red {
		background-color: #EC4A4A;
	}

	.col-white {
		background-color: #FFFFFF;
	}
</style>